<template>
	<view>
		<dev-navbar @information="information" :bg-color="bgColor">
			<!-- 特殊背景自定义 -->
			<template slot="bottom">
				<view class="custom-background">
					<view class="false-background"
						:style="{'height':`${navAllHeight}px`,'background-size':`100% ${navAllHeight+280}px`}"></view>
					<view :style="{'height':`${navAllHeight}px`}"></view>
					<view class="" style="height:280px;"></view>
				</view>
			</template>
		</dev-navbar>

		<view class="content-box" v-if="questionnaireData">
			<view class="big-print">
				您的评估报告
			</view>
			<view class="align-items-l">
				<dev-svg-image mode="image" imageUrl="shoppingMall/C175EB7BC9E14B6F99273562EF56CB18.png" width="32"
					height="32"></dev-svg-image>
				<text class="literal-declaration">免责声明：评估意见基于专业量表，结果仅供参考。</text>
			</view>
			<!-- 数据信息 -->
			<view class="health-data">
				<view class="health-level">
					<!-- 文字 -->
					<view class="text-message">
						<view class="large-text">
							{{questionnaireData.healthGradeVO.healthLevel}}
						</view>
						<view class="belong-to-disease">
							<view class="small-font">
								您属于
							</view>
							<view class="small-font">
								{{questionnaireData.healthGradeVO.crowdName}}
							</view>
						</view>
					</view>
					<!-- 指针 -->
					<view class="pointer-background">
						<view class="pointer"
							:style="[{transform:'rotate(' + (questionnaireData.healthGradeVO.healthScore*1.8) +'deg)'}]">
						</view>
					</view>
				</view>
				<!-- 病情描述 -->
				<view class="condition-description">
                    <u-parse :html="questionnaireData.healthGradeVO.healthLevelDesc"></u-parse>
				</view>
				<!-- <view class="special-reminder">
					特别提示：{{questionnaireData.healthGradeVO.healthTip}}
				</view> -->
			</view>
            
            <!-- 风险因素 -->
            <view class="plate-box">
            	<view class="section-title">
            		风险因素
            	</view>
            	<!-- 风险项 -->
            	<view class="risk-item">
            		<text class="each-risk" v-for="(item,index) in questionnaireData.riskList"
            			:key="index">{{item}}</text>
            	</view>
            
            </view>
            
			<!-- 肿瘤风险分析 -->
			<view class="plate-box" v-if="isShowDiseaseRisk(questionnaireData)">
				<view class="section-title">
						肿瘤风险分析
				</view>
				<view class="analysis-item" v-for="(item,index) in questionnaireData.otherImproveGroupData[0].thematicImproveDataList" :key="index">
					<view class="justify-content-l">
						<view class="analysis-title">
							{{item.riskName}}
						</view>
						<view class="result-status">
							高风险
						</view>
					</view>
					<view class="analysis-results">
						{{item.improveDesc}}
					</view>
				</view>
			</view>
			<!-- 结果分析 -->
			<view class="plate-box">
				<view class="section-title">
						结果分析
				</view>
				<view class="analysis-item" v-for="(item,index) in questionnaireData.improveGroupData" :key="index">
					<view class="justify-content-l">
						<view class="analysis-title">
							{{item.improveName}}
						</view>
						<view class="result-status">
							{{item.appShowGrade}}
						</view>
					</view>
					<view class="analysis-results">
						<p v-for="(list,listIndex) in item.thematicImproveDataList">{{list.improveDesc}}</p>
					</view>
				</view>
			</view>
			<!-- 问卷及问答 -->
			<view class="plate-box">
				<view class="section-title">
					问卷及问答
				</view>
				<view class="analysis-item" v-for="(item,index) in answerDetailsList" :key="index">
					<view class="analysis-title">
						{{index+1}}.{{item.askName}}
					</view>
					<view v-if="item.askType==3||item.askType==4"
						:class="problem.userSelect==1?'analysis-results':'no-choose-text'"
						v-for="(problem,problemIndex) in item.originalAnswers" :key="problemIndex">
						{{problem.ansName}}
					</view>
					<view v-else class="analysis-results">
						{{item.answers}}{{ item.answers=='不知道'?'':(item.unitName||'')}}
					</view>
				</view>
			</view>
		</view>
		<view style="height: 300rpx;"></view>
		<view class="fX">
			<view class="fX-l">
				<view class="fX-l-s">免费评估 专业解读</view>
				<view class="fX-l-x">邀请朋友测一测</view>
			</view>
			<button class="fX-r" open-type="share" @click="flag=1" >
				<image src="https://static.bsyjk.cn/bsy-customer/336B01C455154891A07A4FB087DAFA2F.png"></image>
				分享
			</button>
		</view>
		<!-- <view style="height: 300rpx;"></view> -->
		<dev-iphone-bottom bgColor="#F5F5F5">
			<view class="button-box">
				<view class="justify-content-l">
					<dev-button @tapDev="reassess()" fontSize="34" mode="hollowed" borderColor="#2EA7E0" color="#2EA7E0" bgColor="#fff" width="230"
						height="80" radius="45">
						重新评估
					</dev-button>
					<dev-button @tapDev="interventionPlan()" fontSize="34" width="230" height="80" radius="45" bgColor="#81C042">
						获取干预计划
					</dev-button>
					<dev-button @tapDev="moreAssessments()" fontSize="34" width="230" height="80" radius="45">更多评估</dev-button>
				</view>
			</view>
		</dev-iphone-bottom>
	</view>
</template>

<script>

import uParse from "@/uview-ui/components/u-parse/u-parse.vue"

	export default {
		components: {
			uParse,
		},
		data() {
			return {
				navAllHeight: global.navAllHeight,
				topicId: '', //问卷类型id
				topicName:'',
				userAnsId: '', //问卷id
				questionnaireData: '', //问卷数据

				answerDetailsList: [], //回答详情列表
			};
		},
		onLoad(e) {
			this.topicId = e.topicId;
			this.topicName = e.topicName;
			this.userAnsId = e.userAnsId;
			this.getDetail(); //获取报告详情
			this.answerDetails(); //获取问答列表
			// 分享
			wx.showShareMenu({
				withShareTicket: true,
				//设置下方的Menus菜单，才能够让发送给朋友与分享到朋友圈两个按钮可以点击
				menus: ["shareAppMessage", "shareTimeline"]
			})
		},
		methods: {
            isShowDiseaseRisk(questionnaireData){
                if(questionnaireData.diseaseName=='肿瘤' &&
                 questionnaireData.healthGradeVO.crowdName.indexOf('易患')>0){
                       return true;
                 }else{
                     return false;
                 }
            },
			//发送给朋友 分享
			onShareAppMessage(res) {
				return {
					title: this.topicName,
					type: 0,
					path: 'pagesHome/start-assessment/start-assessment?topicId='+this.topicId,
					summary: "",
					imageUrl: "https://static.bsyjk.cn/bsy-customer/89E202ACF39F43A19951091F6ABF98B0.jpeg"
				}
			},
			//重新评估
			reassess(){
				this.$urouter.redirectTo({
					// url: '/pagesHome/health-assessment/health-assessment',
					url: '/pagesHome/start-assessment/start-assessment',
					params: {
						topicId: this.topicId,
					}
				});
			},
			//更多评估
			moreAssessments(){
				this.$urouter.navigateTo({
					url: '/pagesHome/health-assessment/health-assessment',
					params: {
						// topicId: this.topicId,
					}
				});
			},
			//获取干预计划
			interventionPlan(){
				if(this.questionnaireData.userTaskId==0){
					this.$urouter.navigateTo({
						url: '/pagesHome/health-assessment/health-task',
						params: {

						}
					});
				}else{
					this.$urouter.navigateTo({
						url: '/pagesHome/health-assessment/administration-plan',
						params: {
							userTaskId: this.questionnaireData.userTaskId,
							thematicPlan: this.questionnaireData.thematicPlan,
							thematicPlanName:this.questionnaireData.thematicPlanName,
						}
					});
				}


			},

			//获取navAllHeight 信息
			information(e) {
				this.navAllHeight = e.navAllHeight;
			},
			//获取报告详情
			getDetail() {
				this.$https.get(global.apiUrls.getReportDetails(global.userInfo.phone, this.userAnsId)).then(res => {
					if (res.data.code == 1000) {
						this.questionnaireData = res.data.result;
					}

				})
			},
			//获取问卷详情
			answerDetails() {
				this.$https.get(global.apiUrls.getHistoricalInformation(global.userInfo.phone, this.userAnsId)).then(
					res => {
						if (res.data.code == 1000) {
							this.answerDetailsList = res.data.result;
						}

					})
			}
		}
	}
</script>

<style lang="scss">
	//导航栏自定义背景
	.custom-background {
		background-image: url('http://static.bsyjk.cn/shoppingMall/0559A63303DD4C6CAB43FA53684F31EB.png');
		background-size: 100% 100%;

		.false-background {
			width: 100%;
			position: fixed;
			background-image: url('http://static.bsyjk.cn/shoppingMall/0559A63303DD4C6CAB43FA53684F31EB.png');
			z-index: 99;
			overflow: hidden;
		}
	}

	.content-box {
		margin-top: -260px;
		padding: 0rpx 22rpx;

		.big-print {
			font-size: 48rpx;
			font-weight: 600;
			color: #FFFFFF;
			margin-bottom: 36rpx;
		}

		.literal-declaration {
			margin-left: 10rpx;
			font-size: 24rpx;
			font-weight: 400;
			color: #FFFFFF;
		}

		//健康数据
		.health-data {
			margin-top: 45rpx;
			background: #FFFFFF;
			border-radius: 50rpx;
			padding: 36rpx 32rpx;

			.health-level {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.text-message {

					.large-text {
						font-size: 58rpx;
						font-weight: 600;
						// color: #88EBD4;
					}

					.belong-to-disease {
						margin-top: 20rpx;

						.small-font {
							font-size: 30rpx;
							font-weight: 500;
							color: #F5A623;
						}
					}
				}

				.pointer-background {
					position: relative;
					width: 418rpx;
					height: 224rpx;
					background-image: url('http://static.bsyjk.cn/shoppingMall/850344C22F6347CB8E3B2615FB029550.png');
					background-size: 100% 100%;

					.pointer {
						position: absolute;
						width: 174rpx;
						height: 60rpx;
						background-image: url('http://static.bsyjk.cn/shoppingMall/E9B0F6948EAB4F7E9AA0B614AF74A7A8.png');
						background-size: 100% 100%;
						top: 170rpx;
						left: 68rpx;
						transform-origin: 140rpx 50%;
					}
				}
			}

			//疾病描述
			.condition-description {
				margin-top: 42rpx;
				padding: 22rpx 34rpx;
				width: 650rpx;
				background: #ECFFFB;
				border-radius: 21rpx;
				font-size: 26rpx;
				font-weight: 400;
				color: #4A4A4A;
				line-height: 37rpx;
			}

			//特别提醒
			.special-reminder {
				margin-top: 30rpx;
				font-size: 24rpx;
				font-weight: 400;
				color: #F5A623;
			}
		}

		//风险因素
		.plate-box {
			margin-top: 30rpx;
			padding: 35rpx 28rpx;
			width: 706rpx;
			background: #FFFFFF;
			border-radius: 50rpx;

			//标题
			.section-title {
				font-size: 36rpx;
				font-weight: 500;
				color: #333333;
			}

			//风险项
			.risk-item {
				display: flex;
				align-items: center;
				flex-wrap: wrap;

				.each-risk {
					border-radius: 8rpx;
					padding: 8rpx 10rpx;
					background-color: #2EA7E0;
					font-size: 24rpx;
					font-weight: 400;
					color: #FFFFFF;
					margin-right: 30rpx;
					margin-top: 35rpx;
				}

			}

			//分析
			.analysis-item {
				margin-top: 40rpx;

				.analysis-title {
					font-size: 30rpx;
					font-weight: 500;
					color: #333333;
				}
				.result-status{
					font-size: 30rpx;
					font-weight: 500;
					color: #2EA7E0;
				}

				.analysis-results {
					font-size: 28rpx;

					font-weight: 400;
					color: #333333;
					line-height: 42rpx;
				}

				.no-choose-text {
					font-size: 28rpx;
					font-weight: 500;
					color: #B9B8B9;
					line-height: 42rpx;
				}

			}


		}



	}
	.fX{
		width: 706upx;
		height: 144upx;
		background: url(https://static.bsyjk.cn/bsy-customer/CE74EB8AB864481B8FB0C5D37B0BE546.png) no-repeat;
		background-size: 100% 100%;
		margin: 30upx 22upx 0 22upx;
		display: flex;
		justify-content: space-between;
		position: fixed;
		bottom: 215upx;
		.fX-l{
			margin-left: 38upx;
			margin-top: 30upx;
			.fX-l-s{
				color: #2EA7E0;
				font-size: 36upx;
			}
			.fX-l-x{
				color: #F5A623;
				font-size: 26upx;
				line-height: 35upx;
				margin-top: 8upx;
			}
	
		}
		.fX-r{
			margin-right: 27upx;
			margin-top: 30upx;
			width: 152upx;
			height: 54upx;
			background:  #F5A623;
			border-radius: 45upx;//https://static.bsyjk.cn/bsy-customer/336B01C455154891A07A4FB087DAFA2F.png
			display: flex;
			justify-content: center;
			align-items: center;
			color: #fff;
			font-size: 30upx;
			image{
				width: 32upx;
				height: 30upx;
			}
		}
	}

	.button-box{
		padding: 40rpx 20rpx;
	}

</style>
